{% extends 'base.html' %}
{% load static %}
{% block title %}
    <title>变更记录</title>
{% endblock title %}

{% block navheader %}
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    {% for i in obj %}
                        {% if forloop.first %}
                            <h1>变更记录: {{ i.server.asset_name }}</h1>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{% url 'assets:dashboard' %}">首页</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'assets:server' %}">资产列表</a></li>
                        <li class="breadcrumb-item active">变更记录</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
{% endblock navheader %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">变更记录</h3>
        </div>
        <div class="card-body">
            <div class="container-fluid">

                <!-- Timelime example  -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- The time line -->
                        <div class="timeline">
                            <!-- timeline time label -->
                            {% for record in obj %}
                                <div class="time-label">
                                    <span class="bg-red">{{ record.create_at|date:'Y-m-d H:i:s' }}</span>
                                </div>
                                <div>
                                    <i class="fa fa-user"></i>
                                    <div class="timeline-item">
                                        <div class="timeline-body">{{ record.content }}</div>
                                    </div>
                                </div>
                                {% empty %}
                                <div>
                                    <i class="fa fa-user"></i>
                                    <div class="timeline-item">
                                        <div class="timeline-body">暂无记录</div>
                                    </div>
                                </div>
                            {% endfor %}
                            <!-- END timeline item -->
                            <!-- timeline item -->
                            <div>
                                <i class="fas fa-clock bg-gray"></i>
                            </div>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
            </div>

        </div>
    </div>
{% endblock content %}
